<{extend name="index/header" /}>
<{block name="body"}>
    <section id="page-breadcrumb">
        <div class="vertical-center sun">
             <div class="container">
                <div class="row">
                    <div class="action">
                        <div class="col-sm-12">
                            <h1 class="title">个人中心</h1>
                            <p>USER CENTER</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
   </section>
    <!--/#action-->

    <section id="blog" class="padding-top">
        <div class="container">
            <div class="row">
                <div class="col-md-3 col-sm-5">
                    <div class="sidebar blog-sidebar">
                        <div class="sidebar-item categories">
                            <h3>您好，<{$user.nickname}></h3>
                            <ul class="nav navbar-stacked">
                                <li class="dropdown">
                                    <a href="<{:url('register/gerenadd')}>">修改个人资料</a>
                                </li>
                                <li id="myzhuanji" class="dropdown">
                                    <a href="#">我的传记</a>
                                </li>
                                <li id="myphoto" class="dropdown">
                                    <a href="#">我的相册</a>
                                </li>
                                <li class="dropdown">
                                    <a href="<{:url('chat/chatlist')}>">我的话题</a>
                                </li>
                                <li class="dropdown">
                                    <a href="<{:url('jisi/jisilistPri')}>">我的祭祀</a>
                                </li>
                                <li class="dropdown">
                                    <a href="<{:url('index/mail')}>">站内信</a>
                                </li>
                                <button id="createphoto" class="anniu">
                                    <a href="../zhuanji/photoadd.html">创建相册</a>
                                </button>
                                <button id="writezhuanji" class="anniu">
                                    <a href="../zhuanji/zhuanjiadd.html">写传记</a>
                                </button>
                                <button id="createjisi" class="anniu">
                                    <a href="../jisi/jisiadd.html">发起祭祀</a>
                                </button>
                            </ul>
                        </div>
                    </div>
                </div>

                <style type="text/css">
                    .anniu{ 
                        background-color: pink;
                        height: 45px;
                    }
                </style>

                <div class="col-md-9 col-sm-7">
                    <div class="row">
                        <div class="col-md-12 col-sm-12">
                            <div class="single-blog two-column">
                                <div class="post-content overflow mjgrlistrtext">
                                    <h2 class="post-title bold">
                                        <a href="#">题目，链接到对应的详情页</a>
                                    </h2>
                                    <h3 class="post-author">
                                        <a href="#">发布时间：2017-11-11</a>
                                    </h3>
                                    <a href="#" class="read-more">点击查看详情</a>
                                    
                                </div>
                            </div>
                        </div>
                        <!-- 相册 -->
                        <div id="list">
                        <{volist name="photo" id="vo"}>
                        <div class="col-md-3 col-sm-3" >
                            <div class="portfolio-wrapper">
                                <div class="portfolio-single">
                                    <div class="portfolio-thumb">
                                        <img src="{$vo.photo}" class="img-responsive" alt="">
                                    </div>
                                    <div class="portfolio-view">
                                        <ul class="nav nav-pills">
                                            <li><a href="photodetails.html"><i class="fa fa-link"></i></a></li>
                                            <li><a href="{$vo.photo}" data-lightbox="example-set"><i class="fa fa-eye"></i></a></li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="portfolio-info ">
                                    <h2><{$vo.zhuanjititle}></h2>
                                </div>
                            </div>
                        </div>
                        <{/volist}>
                        </div>

                    </div>
                    <div class="blog-pagination">
                        <{$page}>
                    </div>
                 </div>
            </div>
        </div>
    </section>

    <script type="text/javascript">
                $('#myphoto').click(function(){
                    var list='';
                    $.ajax({
                      type: "post",
                      data:'',
                      url: "<{:url('index/userAjax')}>",
                      dataType: "json",
                      success: function(data) {
            
                       for(var i=0;i<data.data.list.length;i++){
                        list += '<div class="col-md-3 col-sm-3" id="list">'+'<div class="portfolio-wrapper">'+'<div class="portfolio-single">'+'<div class="portfolio-thumb">'+'<img src="'+data.data.list[i].photosdir+'" class="img-responsive" alt="">'+'</div>'+'<div class="portfolio-view">'+'<ul class="nav nav-pills">'+'<li><a href="/api/zhuanji/photodetails?photosid='+data.data.list[i].photosid+'"><i class="fa fa-link"></i></a></li>'+'<li></li>'+'</ul>'+'</div>'+'</div>'+'<div class="portfolio-info ">'+'<h2>'+data.data.list[i].photostitle+'</h2>'+'</div>'+'</div>'+'</div>';
                            $('#myphoto').addClass('active');
                            $('#myzhuanji').removeClass('active');
                       }
                      // console.log(list);
                       $('#list').html(list);
                       
                      },
                      error: function() {
                       console.log('Request Error.');
                      }
                    });
                });

                $('#myzhuanji').click(function(){
                    var list='';
                    $.ajax({
                      type: "post",
                      data:'',
                      url: "<{:url('index/userAjax2')}>",
                      dataType: "json",
                      success: function(data) {
            
                       for(var i=0;i<data.data.list.length;i++){
                        list += '<div class="col-md-3 col-sm-3" id="list">'+'<div class="portfolio-wrapper">'+'<div class="portfolio-single">'+'<div class="portfolio-thumb">'+'<img src="'+data.data.list[i].zhuanjiphoto+'" class="img-responsive" alt="">'+'</div>'+'<div class="portfolio-view">'+'<ul class="nav nav-pills">'+'<li><a href="/api/zhuanji/photodetails?photosid='+data.data.list[i].zhuanjiid+'"><i class="fa fa-link"></i></a></li>'+'<li></li>'+'</ul>'+'</div>'+'</div>'+'<div class="portfolio-info ">'+'<h2>'+data.data.list[i].zhuanjititle+'</h2>'+'</div>'+'</div>'+'</div>';
                            $('#myzhuanji').addClass('active');
                            $('#myphoto').removeClass('active');
                            
                       }
                      // console.log(list);
                       $('#list').html(list);
                       
                      },
                      error: function() {
                       console.log('Request Error.');
                      }
                    });
                });

    </script>
   <{/block}>